import { SearchOutlined } from '@ant-design/icons'
import { Input } from 'antd'
import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import './styles.css'

/*
默认input, 输入1s后触发响应事件
*/

export default function InputAntDef({ searchFun, placeholder, ...props }) {
  const { t } = useTranslation()
  const [value, setValue] = useState('')
  const lastEvent = useRef(null)

  useEffect(() => {
    let timeoutId = null

    const debouncedChange = () => {
      if (lastEvent.current) {
        searchFun(lastEvent.current)
        lastEvent.current = null
      }
    }

    timeoutId = setTimeout(debouncedChange, 1000)

    return () => {
      clearTimeout(timeoutId)
    }
  }, [value])

  const handleChange = event => {
    setValue(event.target.value)
    lastEvent.current = event
  }
  return (
    <>
      <Input
        onChange={handleChange}
        className="Input_ant_def"
        allowClear
        placeholder={placeholder || t('application.searchName')}
        prefix={<SearchOutlined />}
        {...props}
      />
    </>
  )
}
